<template>
  <div>
    <a-modal
      title="流程设计器"
      width="100%"
      :closable="false"
      :keyboard='false'
      :maskClosable='false'
      :footer="null"
      :visible="visible"
      :dialog-style="{ top: '0px' }"
      @cancel="onClose"
      :style="{height: modalHeight}"
    >
      <!--   使用v-if，使FlowDesigner每次打开时自动初始化   -->
      <flow-designer ref="FlowDesigner" v-if="visible" @saveFlow="saveFlow" @close="onClose"></flow-designer>
    </a-modal>
    <!-- 未保存确认对话框 -->
    <a-modal v-model="confirmVisible" title="画布已修改但未保存" on-ok="handleOk">
      <template slot="footer">
        <a-button key="exit" type="danger" @click="close">
          不保存退出
        </a-button>
        <a-button key="cancel" @click="cancelConfirm">
          取消
        </a-button>
        <a-button key="submit" type="primary" :loading="closable" @click="saveAndClose">
          保存并退出
        </a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>

import FlowDesigner from '../../../components/flowDesigner/FlowDesigner'

export default {
  name: 'ProcessDesigner',
  components: {FlowDesigner},
  data () {
    return {
      // 持久化的配置json字串
      unmodifiedData: undefined,
      visible: false,
      confirmVisible: false,
      closable: false,
      modalHeight: '100%'
    }
  },
  mounted () {},
  methods: {
    init () {
      this.visible = true
      this.closable = false
      this.confirmVisible = false
    },
    newModel () {
      this.init()
      this.$nextTick(() => {
        this.modalHeight = this.$refs.FlowDesigner.eleHeight
        this.unmodifiedData = this.$refs.FlowDesigner.getDataString()
      })
    },
    editModel (id) {
      let that = this
      this.$get('/process/design/editFlow', {modelId: id}).then((res) => {
        if (res.data.status) {
          this.init()
          this.$nextTick(() => {
            this.$refs.FlowDesigner.loadFlow(res.data.data)
            // 等待图形渲染完毕才可获取图形数据
            this.$nextTick(() => {
              that.unmodifiedData = that.$refs.FlowDesigner.getDataString()
            })
          })
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    onClose () {
      if (this.checkDataIfModified()) {
        this.showConfirm()
      } else {
        this.close()
      }
    },
    checkDataIfModified () {
      let currData = this.$refs.FlowDesigner.getDataString()
      return !(currData === this.unmodifiedData)
    },
    showConfirm () {
      this.confirmVisible = true
    },
    cancelConfirm () {
      this.confirmVisible = false
    },
    saveAndClose () {
      this.closable = true
      // 导出图片并保存
      this.$refs.FlowDesigner.exportFlowPicture()
    },
    saveFlow (d) {
      this.$post('/process/design/saveFlow', {editorJson: d}).then((res) => {
        if (res.data.status) {
          this.$message.success(res.data.message)
          this.unmodifiedData = this.$refs.FlowDesigner.getDataString()
          this.$emit('success')
          if (this.closable) {
            this.close()
          }
        } else {
          this.$message.error(res.data.message)
          this.closable = false
          this.confirmVisible = false
        }
      })
    },
    close () {
      this.confirmVisible = false
      this.visible = false
      this.closable = false
      this.$emit('close')
    }
  }
}
</script>
